<template>
	<div>
		<!-- 面包屑导航 -->
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/' }">库存</el-breadcrumb-item>
			<el-breadcrumb-item>商品入库</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 卡片视图 -->
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<i class="el-icon-search"></i>
				<span>筛选查询</span>
				<!-- 查询表单 -->
				<el-form :inline="true" class="demo-form-inline">
					<el-form-item label="输入搜索">
						<el-input v-model="name" placeholder="商品名称/商品货号"></el-input>
					</el-form-item>

					<el-form-item label="操作时间">
						<el-date-picker v-model="date1" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"></el-date-picker>
					</el-form-item>

					<el-form-item>
						<el-button type="primary" @click="onsubmit">查询</el-button>
					</el-form-item>
				</el-form>
			</div>
			<!-- 查询表单结束 -->
		</el-card>
		<!-- 表格数据 -->
		<el-table :data="tableData">
			<el-table-column type="selection" stripe style="width:100%"></el-table-column>
			<el-table-column label="编号" prop="id" width="110"></el-table-column>
			<el-table-column label="商品图片" prop="image" width="200">
				<template slot-scope="scope">
					<el-image :src="scope.row.image" width="100px" height="50px">
						<div slot="placeholder" class="image-slot">
							加载中
							<span class="dot">...</span>
						</div>
					</el-image>
				</template>
			</el-table-column>
			<el-table-column label="商品名称" prop="name" width="300">
				<template slot-scope="scope">
					<span>
						{{scope.row.name}}
						<br />
						品牌:{{scope.row.brand_name}}
					</span>
				</template>
			</el-table-column>
			<el-table-column label="货号/属性" width="200">
				<template slot-scope="scope">
					<span>
						货号:{{scope.row.sn}}
						<br />
						属性:{{scope.row.spec}}
					</span>
				</template>
			</el-table-column>
			<el-table-column label="订单号">
				<template slot-scope="scope">
					<span v-if="(scope.row.order_id)!==null">{{scope.row.order_id}}</span>
					<span v-else>N/A</span>
				</template>
			</el-table-column>
			<el-table-column label="库存" prop="num">
				<template slot-scope="scope">
					<span>数量:-1</span>
					<br />
					<span>剩余:{{scope.row.num}}</span>
				</template>
			</el-table-column>
			<el-table-column label="操作信息" width="180">
				<template slot-scope="scope">
					<span>{{scope.row.operater}}</span>
					<br />
					<span>{{scope.row.operate_time}}</span>
				</template>
			</el-table-column>
		</el-table>

		<!-- 分页开始 -->
		<el-pagination
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
			:current-page="page"
			:page-sizes="[5,10,15,20]"
			:page-size="size"
			layout="total, sizes, prev, pager, next, jumper"
			:total="this.total"
		></el-pagination>
		<!-- 分页结束 -->
	</div>
</template>

<script>
export default {
  data() {
    return {
      // 表格数据
      tableData: [],
      name:"",
      date1:"",
      // 分页数据
      page: 1,
      size: 10,
    
      // 总记录数
      total: 0,
    };
  },
  methods: {
    async getDelivery() {
      const { data: res } = await this.$http.get(`/goods/stock/findOutStock?page=${this.page}&size=${this.size }&name=${this.name}&date1=${this.date1}`)
      if (res.code == 200) {
        this.$message.success("查询成功");
        this.tableData = res.data.rows
        this.total=res.data.total
      } 
    },
    async onsubmit(){
      this.getDelivery();
    },
    handleSizeChange(val) {
      this.size=val;
      this.getDelivery();
    },
    handleCurrentChange(val) {
      this.page=val;
      this.getDelivery();
    },
  },
  created() {
    this.getDelivery();
  },
};
</script>

<style>
</style>